<template>
	<view>
		<view class="top-search">
			<view class="search flex align-center">
				<view class="search-box flex align-center  flex-item">
					<view class="icon flex align-center">
						<uni-icons color="#999" type="search" size="20"></uni-icons>
					</view>
					<input type="text" value=""  placeholder="搜索姓名或者手机号" v-model="search_name" class="flex-item"/>
				</view>
				<image class="btn" @click="confirmSearch" src="/static/image/icon/search.png" style="width: 90rpx;height: 90rpx;"></image>
			</view>
		</view>
		<view class="order" v-for="(item,index) in orderList" :key="index" @click="link('/pages/index/add-entry-staff?id='+item.id)">
			<view class="order-number">
				<view class="number-left">
				<!-- 	<image
						src="/uni_modules/yt-order-list/static/number.png"
						mode="widthFix"></image> -->
					<text>{{ item.name }}</text>
				</view>
				<view class="number-right" :class="item.status == 'FINISH' ? 'green':item.status == 'LEAVE'?'red':'blue'">
					{{ item.status_text }}
				</view>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/mobile.png"
					mode="widthFix"></image>
				<text style="font-size: 30rpx; color: #000000;" class="row1">{{ item.mobile }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/addrer.png"
					mode="widthFix"></image>
				<text>职位：</text>
				<text>{{ item.position_name }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/maddres.png"
					mode="widthFix"></image>
				<text>团队：</text>
				<text>{{ item.team_name }}</text>
			</view>
			<view class="order-item">
				<image
					src="/uni_modules/yt-order-list/static/time.png"
					mode="widthFix"></image>
				<text>入职时间：</text>
				<text>{{ item.entry_time }}</text>
			</view>
		</view>
		<image class="add-btn" src="/static/image/icon/add_new.png" @click="addStaff"></image>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				isnothing: false,
				hasMore: true,
				loading: true,
				page   : 0,
				search_name : '',
                orderList: [],
            }
        },
		//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
		onInit() {
			   this.getUserInfo();	
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad() {
			 this.getEntryStaffList();
		},
		onReachBottom() {
			this.loading = true
			this.getEntryStaffList();
		},
		onShow() {
			this.page=0;
			this.loading=true;
			this.orderList = [];
			this.getEntryStaffList();
		},
        methods: {
			link(url){
					  uni.navigateTo({
					  	url
					  })
			},
			addStaff(){
				uni.navigateTo({
					url:'/pages/index/add-entry-staff'
				})
			},
            confirmSearch(){
            	this.page=0;
            	this.loading=true;
            	this.orderList = [];
            	this.getEntryStaffList();
            },
			getUserInfo() {
				let param = {};
				this.$http.getUser(param).then(res => {
					if (res.code == 1 && res.data) {
						if(res.data.is_personnel_matters == 0){
							this.$refs.tooltip.open({
								msg: '提示',//标题
								content: '你没有操作!',//提示内容
								showCancel: false//不显示取消按钮
							})
						}
					}else{
						uni.removeStorageSync('mobile');
					}
				});
			},
			getEntryStaffList(){
				try {
					let param = { 'page' : this.page , 'name' : this.search_name};
					this.$http.getEntryList(param).then(res => {
						if (res.code == 1 && res.data) {
							let arr = res.data.list;
							this.loading = false
							if (this.orderList.length > 0) {
								this.orderList = this.orderList.concat(arr || [])
							} else {
								this.orderList = arr || []
								if (this.orderList.length == 0) {
									this.isnothing = 1
								}
							}
							this.page++;
						}else{
							uni.removeStorageSync('mobile');
						}
					});
				} catch (e) {
					console.log("e: ", e);
				}
			}
        }
    }
</script>
<style lang="scss">
	.add-btn{
		width: 90rpx;
		height: 90rpx;
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
	}
	
	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order {
		width: 100%;
		// height: 200rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		margin-bottom: 25rpx;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
					margin-left : 45rpx;
				}
			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}
			}
		}
	}
	.top-search{padding: 0rpx 30rpx 0;border-bottom: 2rpx solid #eee;z-index: 2;background: #fff;
		.search{padding: 20rpx 0;
			.search-box{border: 2rpx solid #eee;padding: 0rpx 40rpx;border-radius: 10rpx;margin-right: 40rpx;width:550rpx;
			    .icon{height: 30rpx;}
				input{padding-left: 10rpx;height: 60rpx;line-height: 60rpx;font-size: 28rpx;}
			}
		}
		.btn{
			color: #4b5eeb;
		}
		.filter{
			padding: 20rpx 10rpx;font-size: 26rpx;color:#666;line-height:1;
			>view{margin-right: 40rpx;}
			.sort{
				width: 30rpx;height:30rpx;
			}
		}
	}
</style>